<template>
  <div class="embodimentDetail">
    <div class="title">
      <p class="title-one">注意：1、提现申请需在1-2个工作日内完成审核</p>
      <p class="title-two">
        2、审核提现订单时需仔细核对提现金额与账户入账金额是否相符。
      </p>
    </div>
    <div class="account-information">
      <!-- 账户信息 -->
      <p class="title">账户信息</p>
      <div class="content">
        <div class="item-left">
          <div class="item">
            <span>申请人姓名</span>
            <span>{{merchantsData.collectionName}}</span>
          </div>
          <div class="item">
            <span>提现方式</span>
            <span>银行卡</span>
          </div>
          <div class="item">
            <span>支行名称</span>
            <span>{{merchantsData.branchName}}</span>
          </div>
        </div>
        <div class="item-right">
          <div class="item">
            <span>联系电话</span>
            <span>{{merchantsData.chargePersonPhone}}</span>
          </div>
          <div class="item">
            <span>银行名称</span>
            <span>{{merchantsData.bankName}}</span>
          </div>
          <div class="item">
            <span>银行卡号</span>
            <span>{{merchantsData.bankCard}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="embodiment-information">
      <!-- 提现信息 -->
      <p class="title">提现信息</p>
      <div class="content">
        <div class="item-left">
          <div class="item">
            <span>提现订单编号</span>
            <span>{{merchantsData.withdrawalCode}}</span>
          </div>
          <div class="item">
            <span>提现手续费</span>
            <span>{{merchantsData.handlingFee}}</span>
          </div>
        </div>
        <div class="item-right">
          <div class="item">
            <span>提现金额</span>
            <span>{{merchantsData.withdrawalMoney}}</span>
          </div>
          <div class="item">
            <span>实际到账金额</span>
            <span>{{merchantsData.realityMoney}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 明细 -->
    <div class="detail">
      <p class="title">明细</p>
      <div class="table" style="margin-top: 10px">
        <el-table :data='merchantsData.lists' stripe border>
          <el-table-column type="index"  width="100"  label="序号"></el-table-column>
          <el-table-column prop="orderNo" label="商品订单编号"></el-table-column>
          <el-table-column prop="siteCommission" label="到账简分"></el-table-column>
          <el-table-column label="来源">
            <template slot-scope="scope" >
              <span v-if="scope.row.type==1">返利收入</span>
              <span v-if="scope.row.type==2">平台奖励</span>
              <span v-if="scope.row.type==3">推广分佣</span>
            </template>
          </el-table-column>
          <el-table-column prop="arrivalTime" label="到账日期"></el-table-column>
          <el-table-column prop="remarks" label="备注"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 提交审核 -->
    <div class="submit-check">
      <p class="title">提交审核</p>
      <div class="checkbox">
        <template>
          <el-radio v-model="contractState" label=0>待处理</el-radio>
          <el-radio v-model="contractState" label=1>已处理</el-radio>
          <el-radio v-model="contractState" label=2>已拒绝</el-radio>
          <el-radio v-model="contractState" label=3>已打款</el-radio>
        </template>
      </div>
    </div>
    <!-- 备注 -->
    <div class="remarks">
      <p class="title">备注</p>
      <textarea
        placeholder="审核未通过时，需要写明原因"
        name=""
        id=""
        cols="60"
        rows="10"
        v-model="remarks"
      ></textarea>
    </div>
    <div class="search-btn">
      <span class="my-btn" @click="goback">返回</span>
      <span class="my-btn my-back-blue" @click="sumbit" style="margin-left:40px">提交</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        merchantsData:'',
        remarks:'',
        withdrawalId:'',
        contractState:''
    };
  },
  mounted() {
    this.withdrawalId=this.$route.query.withdrawalId
    this.loadList()
  },
  methods: {
    goback(){
      this.$router.go(-1)
    },
    loadList(){
        var param={
            withdrawalId:this.withdrawalId
        }
        this.axios({
            url:'/siteWithdrawal/withdrawalGetById',
            method:'post',
            data:JSON.stringify(param),
        }).then(res=>{
            this.merchantsData=res.data.data
        })
      },
    //提交
    sumbit(){
      var param={
          "remarks": this.remarks,
          "state": this.contractState,
          "withdrawalId": this.withdrawalId
        }
        this.axios({
            url:'/siteWithdrawal/withdrawalGetById',
            method:'post',
            data:JSON.stringify(param),
        }).then(res=>{
            this.$router.go(-1)
        })
    }
  },
  watch: {},
};
</script>

<style scoped>
.embodimentDetail .title {
  margin-top: 15px;
}
.embodimentDetail p {
  padding-left: 0 10px;
}
.embodimentDetail .title-two {
  text-indent: 3rem;
}

.title {
  margin-top: 20px;
}
.content {
  margin-left: 60px;
}
.content .item {
  margin-top: 5px;
}
.item-left {
  width: 260px;
  display: inline-block;
}
.item-right {
  width: 500px;
  margin-left: 150px;
  display: inline-block;
}
.account-information .item span:nth-child(1) {
  display: inline-block;
  width: 95px;
}

.embodiment-information .item span:nth-child(1) {
  display: inline-block;
  width: 109px;
}
.item span:nth-child(2) {
  display: inline-block;
  width: 150px;
}
.checkbox {
  padding-left: 20px;
  margin-top: 15px;
}
.checkbox label input {
  height: 15px;
}
.remarks textarea {
  padding: 5px;
  margin-top: 10px;
}

.search-btn{
   position: absolute;
   left: 50%;
   transform: translate(-50%);
}
</style>   